<template>
  <div class="add-form">
    <div class="nb-tittle">{{ title }}</div>
    <el-form ref="form" :model="data" inline label-width="100px" hide-required-asterisk class="hx-form" :rules="rules">
      <el-row class="returned-form">
        <el-col :span="7">
          <el-form-item label="发票：">
            <el-input v-model="invoiceName" readonly />
          </el-form-item>
        </el-col>
        <el-col v-if="editId" :span="7">
          <el-form-item label="项目名称：">
            <el-input v-model="project_name" readonly />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="editId" class="returned-form">
        <el-col :span="7">
          <el-form-item label="客户名称：">
            <el-input v-model="customer_name" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="合同编号：">
            <el-input v-model="data.contract.code" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="editId" class="returned-form">
        <el-col :span="7">
          <el-form-item label="负责人：">
            <el-input v-model="cr_admin_name" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="合同金额：">
            <el-input v-model="invoice_sum" :precision="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="editId" class="returned-form">
        <el-col :span="7">
          <el-form-item label="回款次数：" prop="return_times">
            <el-input v-model="data.return_times" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="回款金额：" prop="invoice_sum">
            <el-input v-model="invoice_sum" :precision="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item v-if="editId" label="上传附件：">
            <Adjunct table_name="returned" :pk="editId" class="detail-input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin:40px 20px 0">
        <el-button v-if="data.status === 1 && (isSuper || isFinish )" type="success" @click="changeStatus(2)">确认付款</el-button>
        <el-button type="primary" class="button-hidden" @click="submitForm('form')">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import API from '@/api/returned/returned'
import { payMethodIdOption } from '@/utils/options'
import Adjunct from '@/components/Upload/Adjunct'
import INVOICE from '@/api/invoice/invoice'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'setStorage', 'clearStorage', 'getStorage', 'super', 'finish'],
  components: { Adjunct },
  data() {
    return {
      data: {
        contract: {
          code: ''
        }
      },
      project_name: '',
      customer_name: '',
      invoice_sum: '',
      invoiceList: '',
      invoiceName: '',
      cr_admin_name: '',
      payMethodIdOption,
      isFinish: false,
      isSuper: false,
      title: '',
      editId: '',
      rules: {}
    }
  },
  created() {
    const edit = this.isEdit()
    this.isFinish = this.finish()
    this.isSuper = this.super()
    if (edit) {
      this.title = '回款详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增回款'
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        this.project_name = res.data.project.name
        this.customer_name = res.data.project.customer.name
        this.invoice_sum = res.data.invoice.invoice_sum
        this.cr_admin_name = res.data.cr_admin.name
        this.getInvoiceList()
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('returned')
    },
    cancel() {
      this.goUrl('/returned')
    },
    changeStatus(status) {
      const id = this.editId
      API.status({ id, status }).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('回款成功')
          this.goUrl('/returned')
        }
      })
    },
    getInvoiceList() {
      const id = this.data.invoice_id
      const query = {
        id,
        status: 4
      }
      INVOICE.invoiceList(query).then(res => {
        this.invoiceList = res.data.data
        this.invoiceName = this.invoiceList[0].name
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.update(API, this.data, '更新成功')
          } else {
            this.add(API, this.data, '新增成功')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style>
.returned-form .el-form-item__content{
  width: calc(100% - 100px);
}
</style>
